<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <meta charset="utf-8">
    <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商城首页</title>

    <!-- 引入Bootstrap核心样式文件 -->
    <link href="../../css/bootstrap.css" rel="stylesheet">

    <!-- 引入jQuery核心js文件 -->
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="../../js/bootstrap.min.js"></script>
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>

    <style type="text/css">
        .div {
            border: 1px dotted #E0E0E0;
            font-size: 10pt;
            margin: 3px;
            float: left;
            text-align: center;
            width: 120px;
        }

        .img {
            width: 100px;
            height: 120px;
            border: 0px;
        }
    </style>
</head>
<body>
<form id="queryForm" action="${pageContext.request.contextPath }/index_queryBooks.action" method="post">
    <input type="hidden" id="currentPage" name="currentPage" value="${pageBean.currentPage }"/>
    <input type="hidden" id="pageSizeId" name="pageSize" value="${pageBean.pageSize }"/>
    <input type="hidden" name="typeId" value="${param['typeId'] }"/>
</form>

<c:forEach items="${pageBean.data}" var="book" varStatus="idx">
    <div class="div" onmousemove="divin(this);" onmouseout="divout(this);">
        <a href="${pageContext.request.contextPath }/index_queryBook.action?id=${book.id}">
            <img class="img" src="${pageContext.request.contextPath }/imgs/${book.img}"/>
        </a>
        <br/>
        <c:choose>
            <c:when test="${fn:length(book.name)>7}">
                ${fn:substring(book.name,0,7)}...
            </c:when>
            <c:otherwise>
                ${book.name}
            </c:otherwise>
        </c:choose>
        <br/>
        <c:if test="${book.price!=book.currentPrice}" var="boo">
            <font style="text-decoration:line-through;">${book.price}元</font>
        </c:if>
        <font style="color:red;">${book.currentPrice}元</font>
    </div>
    <c:if test="${idx.count%4==0}">
        <br style="clear:left;"/>
    </c:if>
</c:forEach>
            <%--分页显示 --%>
            <%--
                   需求：
                       1） 如果当前页是首页，那么不能点击“首页”和“上一页”，否则可以点击
                       2) 如果当前页是末页，那么不能点击“下一页”和“末页”，否则可以点击
                    --%>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <c:choose>
                <c:when test="${pageBean.currentPage==pageBean.firstPage}">
                    <button type="button" class="btn btn-primary"  disabled="disabled">首页</button>
                    <button type="button" class="btn btn-primary"  disabled="disabled">上一页</button>
                </c:when>
                <c:otherwise>
                    <button type="button" class="btn btn-primary"  onclick="toPage(${pageBean.firstPage})">首页</button>
                    <button type="button" class="btn btn-primary"  onclick="toPage(${pageBean.prePage})">上一页</button>
                </c:otherwise>
            </c:choose>
            <c:choose>
                <c:when test="${pageBean.currentPage==pageBean.totalPage}">
                    <button type="button" class="btn btn-primary"  disabled="disabled" >下一页</button>
                    <button type="button" class="btn btn-primary"   disabled="disabled">末页</button>
                </c:when>
                <c:otherwise>
                    <button  onclick="toPage(${pageBean.nextPage})" type="button" class="btn btn-primary" >下一页</button>
                    <button   onclick="toPage(${pageBean.totalPage})" type="button" class="btn btn-primary" >末页</button>
                </c:otherwise>
            </c:choose>
            <br/>
            当前为第${pageBean.currentPage }页/共${pageBean.totalPage }页&nbsp;
            共${pageBean.totalCount }条数据&nbsp;

            每页显示 <input type="text" size="2" id="pageSize" value="${pageBean.pageSize }" style="text-align: center;"/> 条&nbsp;
            跳转到第<input type="text" id="curPage" size="2" value="${pageBean.currentPage }" onblur="changePage()" style="text-align: center;"/>页
        </td>
    </tr>
</table>
</body>
<script type="text/javascript">
    function divin(obj) {
        obj.className = "divin";
    }
    function divout(obj) {
        obj.className = "div";
    }
    //提交表单,进行翻页
    function toPage(pageNo) {
        //提交之前，把当前页设置跳转到页码
        document.getElementById("currentPage").value = pageNo;
        //提交表单
        var queryForm = document.getElementById("queryForm");
        queryForm.submit();//提交表单
    }

    /*改变每页显示记录数*/
    function changePageSize() {
        //1.得到用户输入
        var pageSize = document.getElementById("pageSize").value;
        //判断规则：只能输入1-2个的数字
        var reg = /^[1-9][0-9]?$/;
        if (!reg.test(pageSize)) {
            $.messager.alert('警告', '只能输入1-2个数字');
            return;
        }
        //每次改变,都需要把当前页设置为第1页
        document.getElementById("currentPage").value = "1";
        //2.
        //提交表单,同时发送参数(pageSize)
        document.getElementById("pageSizeId").value = pageSize;
        var queryForm = document.getElementById("queryForm");
        queryForm.submit();//提交表单
    }

    function changePage() {

        changePageSize();
        //得到用户输入的当前页
        var curPage = document.getElementById("curPage").value;
        //判断规则：只能输入1-2个的数字
        var reg = /^[1-9][0-9]?$/;
        if (!reg.test(curPage)) {
            $.messager.alert('警告', '只能输入1-2个数字');
            return;
        }
        //每次改变,都需要把当前页设置为第curPage页
        document.getElementById("currentPage").value = curPage;
        //2.
        var queryForm = document.getElementById("queryForm");
        queryForm.submit();//提交表单

    }
</script>
</html>
